<template>
  <div>
    <!--tab标签页切换标题-->
    <Tabs :option="tabsOption" @change="changeTabsMethods"></Tabs>
    <!--tab标签页切换内容-->
    <div class="tabsChangeContent">
      <!--余额查询-->
      <div v-show="changeTabOption.prop===0">
        <SimpleData :simpleData="balanceAccountData" :option="balanceOption"></SimpleData>
      </div>
      <!--明细查询-->
      <div v-show="changeTabOption.prop===1">
        <CommonTable
          :option="detailSearchOption"
          :buttonSelf="detailButtonArray"
          :data="detailSearchData"
          :page="pageDetailDetailSearch"
          @selfButton="selfButtonDetail"
          @search="search"
          @sizeChange="sizeChangeDetailSearch"
          @currentChange="currentChangeDetailSearch">
        </CommonTable>
      </div>
      <!--子账户查询-->
      <div v-show="changeTabOption.prop===2">
        <CommonTable
          :option="subAccountOption"
          :data="subAccountData"
          :page="pageDetailSubAccount"
          @search="querySubBank"
          @sizeChange="sizeChangeSubAccount"
          @currentChange="currentChangeSubAccount">
        </CommonTable>
      </div>
      <!--开户行查询-->
      <div v-show="changeTabOption.prop===3">
        <SimpleData :simpleData="openBankData" :option="openBankOption"></SimpleData>
        <el-button type="primary" class="btn btn-primary">短信发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import Axios from 'axios'
  import Tabs from '@/components/common/Tabs'
  import SimpleData from '@/components/common/SimpleData'
  import CommonTable from '@/components/common/CommonTable'
  import CommonDate from '@/components/common/CommonDate'
  import { queryLoss } from '@/api/bankBiz/loss/loss'

  export default {
    name: 'accSearch',
    components: {
      Tabs,
      SimpleData,
      CommonTable
    },
    data () {
      return {
        tabsOption: {
          column: [{
            label: '余额查询',
            prop: 0
          }, {
            label: '明细查询',
            prop: 1
          },
            {
              label: '子账户查询',
              prop: 2
            },
            {
              label: '开户行查询',
              prop: 3
            }]
        },
        changeTabOption: {},
        // 余额查询data
        balanceAccountData: {
          'balance': '130000',
          'availableBalance': '23412'
        },
        balanceOption: {
          column: [
            {
              'prop': 'balance',
              'label': '余额',
              'span': 8
            },
            {
              'prop': 'availableBalance',
              'label': '可用余额',
              'span': 8
            }
          ]
        },
        // 明细查询
        detailSearchData: [],
        detailSearchOption: {},
        detailButtonArray: [
          {
            label: '最近10笔',
            prop: 0
          },
          {
            label: '最近10日',
            prop: 1
          }
        ],
        pageDetailDetailSearch: {
          pageSizes: [10, 20, 30, 40],
          currentPage: 1,
          total: 10,
          pageSize: 10
        },
        // 子账户查询
        subAccountData: [],
        subAccountOption: {},
        pageDetailSubAccount: {
          pageSizes: [10, 20, 30, 40],
          currentPage: 1,
          total: 10,
          pageSize: 10
        },
        // 开户行查询data
        openBankData: {
          'name': '中国银行',
          'address': '中国银行潮汕路分行',
          'largeNum': '123',
          'phone': '13245678904'
        },
        openBankOption: {
          column: [
            {
              'prop': 'name',
              'label': '开户行名称',
              'span': 8
            },
            {
              'prop': 'address',
              'label': '开户行地址',
              'span': 8
            },
            {
              'prop': 'largeNum',
              'label': '大额行号',
              'span': 8
            },
            {
              'prop': 'phone',
              'label': '开户行电话',
              'span': 8
            }
          ]
        }
      }
    },
    created () {
      this.changeTabOption.prop = 0
      // 余额查询
      this.quertyBalanceData()
      // 明细查询
      this.search()
      // 子账户查询
      this.querySubBank()
      // 开户行查询
      this.quertyOpenBankeData()
      // 明细查询条件配置
      this.setQueryConditionOption()
      // 子账户查询条件配置
      this.setSubAccountOption()
    },
    methods: {
      // 初始化配置
//      initOptions () {
//        this.namespace = this.$route.query['namespace']
//        this.nameFlag = this.$route.query['nameFlag']
//        console.log('receive params is: ' + this.namespace + ', ' + this.nameFlag)
//        if (!this.namespace) {
//          this.$message.error('namespace不能为空')
//        }
//        if (!this.nameFlag) {
//          this.$message.error('nameFlag不能为空')
//        }
//        let viewOptions = personalOptions.viewOption
//        this.tabsOption = viewOptions[this.nameFlag].tabsOption
//        this.currencyTable()
//      },
      // 切换页签
      changeTabsMethods (data) {
        this.changeTabOption = data
        return
        if (data.prop === 0) {
          // 余额查询
          this.quertyBalanceData()
        } else if (data.prop === 3) {
          // 开户行查询
          this.quertyOpenBankeData()
        }
      },
      // 余额查询
      quertyBalanceData () {
        return
        // 调接口
        let balanceAccountParams = {
          namespace: 'Personal',
          key: 'balanceAccountData'
        }
        queryLoss(balanceAccountParams).then((res) => {
          if(res.data.code == 200){
            this.balanceAccountData = res.data.data
          }else{
            this.balanceAccountData = {},
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }

        })
      },
      // 明细查询配置
      setQueryConditionOption () {
        Axios.post('/api/personalData').then((res) => {
          this.detailSearchOption = res.data.detailSearchOption
        }).catch((err) => {
          console.log(err)
        })
      },
      // 明细查询数据
      search () {
        // 调接口
        let detailSearchParams = {
          namespace: 'Personal',
          key: 'detailSearchData',
          query: {
            pageSize: 10,
            currentPage: 1,
            transferDateStart: '2020-01-01',
            transferDateEnd: '2020-01-02'
          }
        }
        queryLoss(detailSearchParams).then((res) => {
          if(res.data.code == 200){
            this.pageDetailDetailSearch.total = res.data.data.totalNum
            this.detailSearchData = res.data.data.dataObj
          }else{
            this.pageDetailDetailSearch.total = 0
            this.detailSearchData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }

        })
      },
      // 自定按钮事件
      selfButtonDetail (prop) {
        // 最近10笔
        if (prop == this.detailButtonArray[0].prop) {
          console.log('触发最近10笔查询')
        }
        // 最近10日
        else if (prop == this.detailButtonArray[1].prop) {
          console.log('触发最近10日查询')
        }
      },
      // 子账户查询配置
      setSubAccountOption () {
        Axios.post('/api/personalData').then((res) => {
          this.subAccountOption = res.data.subAccountOption
        }).catch((err) => {
          console.log(err)
        })
      },
      // 子账户查询数据
      querySubBank () {
        // 调接口
        let subAccountParams = {
          namespace: 'Personal',
          key: 'subAccountData',
          query: {
            pageSize: 10,
            currentPage: 1,
            accountType: 'A',
            currency: '美元',
            saveTime: '10年',
            openingDateStart: '2020-01-01',
            openingDateEnd: '2020-01-01'
          }
        }
        queryLoss(subAccountParams).then((res) => {
          if(res.data.code == 200){
            this.pageDetailSubAccount.total = res.data.data.totalNum
            this.subAccountData = res.data.data.dataObj
          }else{
            this.pageDetailSubAccount.total = 0
            this.subAccountData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }

        })
      },
      // 开户行查询
      quertyOpenBankeData () {
        return
        // 调接口
        let openBankParams = {
          namespace: 'Personal',
          key: 'openBankData'
        }
        queryLoss(openBankParams).then((res) => {
          if(res.data.code == 200){
            this.openBankData = res.data.data
          }else{
            this.openBankData = {}
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }

        })
      },
      // 明细查询数据,切换行数
      sizeChangeDetailSearch (val) {
        this.pageDetailDetailSearch.currentPage = 1
        this.pageDetailDetailSearch.pageSize = val
        this.$message.success('行数' + val)
        // 调接口
        let detailSearchParams = {
          namespace: 'Personal',
          key: 'detailSearchData',
          query: {
            pageSize: val,
            currentPage: 1,
            transferDateStart: '2020-01-01',
            transferDateEnd: '2020-01-02'
          }
        }
        queryLoss(detailSearchParams).then((res) => {
          if(res.data.code == 200){
            this.pageDetailDetailSearch.total = res.data.data.totalNum
            this.detailSearchData = res.data.data.dataObj
          }else{
            this.pageDetailDetailSearch.total = 0
            this.detailSearchData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }

        })
      },
      // 明细查询数据,切换页码
      currentChangeDetailSearch (val) {
        this.pageDetailDetailSearch.currentPage = val
        this.$message.success('页码' + val)
        // 调接口
        let detailSearchParams = {
          namespace: 'Personal',
          key: 'detailSearchData',
          query: {
            pageSize: this.pageDetailDetailSearch.pageSize,
            currentPage: val,
            transferDateStart: '2020-01-01',
            transferDateEnd: '2020-01-02'
          }
        }
        queryLoss(detailSearchParams).then((res) => {
          if(res.data.code == 200){
            this.pageDetailDetailSearch.total = res.data.data.totalNum
            this.detailSearchData = res.data.data.dataObj
          }else{
            this.pageDetailDetailSearch.total = 0
            this.detailSearchData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }

        })
      },
      // 子账户查询数据,切换行数
      sizeChangeSubAccount (val) {
        this.pageDetailSubAccount.currentPage = 1
        this.pageDetailSubAccount.pageSize = val
        this.$message.success('行数' + val)
        // 调接口
        let subAccountParams = {
          namespace: 'Personal',
          key: 'subAccountData',
          query: {
            pageSize: val,
            currentPage: 1,
            accountType: 'A',
            currency: '美元',
            saveTime: '10年',
            openingDateStart: '2020-01-01',
            openingDateEnd: '2020-01-01'
          }
        }
        queryLoss(subAccountParams).then((res) => {
          if(res.data.code == 200){
            this.pageDetailSubAccount.total = res.data.data.totalNum
            this.subAccountData = res.data.data.dataObj
          }else{
            this.pageDetailSubAccount.total = 0
            this.subAccountData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }

        })
      },
      // 子账户查询数据,切换页码
      currentChangeSubAccount (val) {
        this.pageDetailSubAccount.currentPage = val
        this.$message.success('页码' + val)
        // 调接口
        let subAccountParams = {
          namespace: 'Personal',
          key: 'subAccountData',
          query: {
            pageSize: this.pageDetailSubAccount.pageSize,
            currentPage: val,
            accountType: 'A',
            currency: '美元',
            saveTime: '10年',
            openingDateStart: '2020-01-01',
            openingDateEnd: '2020-01-01'
          }
        }
        queryLoss(subAccountParams).then((res) => {
          if(res.data.code == 200){
            this.pageDetailSubAccount.total = res.data.data.totalNum
            this.subAccountData = res.data.data.dataObj
          }else{
            this.pageDetailSubAccount.total = 0
            this.subAccountData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }

        })
      }
    },
    // 进入路由初始化配置
//    beforeRouteEnter (to, from, next) {
//      next((vm) => {
//        vm.initOptions()
//      })
//    }
  }
</script>

<style scoped>
</style>
